<template>
  <s-layout class="set-wrap" title="商城" navbar="" :bgStyle="{ color: '#f7f7f7' }" tabbar="/pages/yy/mall">
    <!-- #ifdef APP-PLUS -->
    <view class="h-[2.75rem]"></view>
    <!-- #endif -->
    <view class="flex flex-col gap-4 p-4">
      <view class="flex gap-4 items-center">
        <view class="text-[1.125rem] text-[#382B2B] flex-none font-bold" v-if="state.hzname">
          {{ state.hzname }}
        </view>
        <view class="rounded-full bg-[#FFFFFF] p-1 flex-1 flex items-center justify-between gap-4 pl-3">
          <!-- <uni-easyinput v-model="state.keyword" type="text" placeholder="请输入关键字" :inputBorder="false" @input="clearContet" /> -->
          <input placeholder="请输入关键字" class="text-[13px] text-[#8B88AB] flex-1 h-full" v-model="state.keyword" />

          <view class="rounded-full bg-[#0788C8] h-full px-4 py-1" @click="goods()">
            <view class="text-[1rem] text-[#FFFFFF]"> 搜索 </view>
          </view>
        </view>
      </view>

      <view class="flex flex-col">
        <!-- <u-swiper :list="state.swiperList" keyName="image" height="150"></u-swiper> -->
        <view class="h-[9.375rem] bg-[#F7F7F7] rounded-lg overflow-hidden" @click="applyForSettlement">
          <image :src="state.config?.brand_banner" class="size-full" mode="scaleToFill" />
        </view>
        <u-tabs :list="state.tabList" :scrollable="true" v-model="state.active" @change="handleChange"></u-tabs>
      </view>
      <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无列表" icon="/static/collect-empty.png" />

      <view class="grid grid-cols-2 gap-4" v-if="state.list">
        <view v-for="(i, k) in state.list" class="flex overflow-hidden flex-col col-span-1 bg-white rounded-lg" :key="k" @click="toDetail(i)">
          <view class="aspect-square w-full bg-white">
            <image :src="i.image" mode="scaleToFill" class="size-full" />
          </view>
          <view class="flex flex-col gap-2 p-2">
            <view class="text-[#333333] line-clamp-1 text-[.875rem]">{{ i.title }}</view>
            <view class="text-[#333333] text-[.75rem] line-clamp-1">{{ i.subtitle }}</view>
            <view class="flex justify-between items-center text-[.75rem] text-[#C17F37]">
              <view> ¥{{ i.original_price }} </view>
              <view class="text-[#FE3131]"> 会员价：{{ i.price }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more status="noMore" v-if="state.list.length"></uni-load-more>
    <!-- <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 确认修改 </view>
      </view>
    </view> -->
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    active: 0,
    tabList: [],

    keyword: '',
    list: [],
    loading: true,
    hzname: '',
    id: 0,
    config: {},
    page: 1,
  });
  // 监听商品更新事件
  onMounted(() => {
    // 监听商品更新事件，用于从添加商品页面返回时刷新列表
    uni.$on('goodsUpdated', (needRefresh) => {
      if (needRefresh) {
        state.value.page = 1;
        goods();
      }
    });
  });

  // 组件销毁时移除事件监听
  // onUnmounted(() => {
  //   uni.$off('goodsUpdated');
  // });

  // 页面显示时检查是否需要刷新
  // onShow(() => {
  //   // 获取当前页面实例
  //   const pages = getCurrentPages();
  //   const currentPage = pages[pages.length - 1];

  //   // 检查是否设置了刷新标记
  //   if (currentPage.$vm && currentPage.$vm.needRefresh) {
  //     // 重置刷新标记
  //     currentPage.$vm.needRefresh = false;
  //     // 刷新商品列表
  //     state.value.page = 1;
  //     goods();
  //   }
  // });

  onLoad((e) => {
    console.log('res==> ', e);
    if (e.keyword) {
      state.value.keyword = e.keyword;
      goods();
    }
    categoryList();
    hzname();
    config();
  });
  onReachBottom(() => {
    // if (state.value.list.length === 0) {
    //   return;
    // }
    state.value.page++;

    goods();
  });
  onPullDownRefresh(() => {
    state.value.page = 1;
    state.value.list = [];
    goods();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  });
  // 配置
  function config() {
    sheep.$api.yy.config().then((res) => {
      if (res.code === 1) {
        state.value.config = res.data;
        //store_banner
      }
    });
  }
  // 会长名称
  function hzname() {
    sheep.$api.yy.hzname().then((res) => {
      if (res.code === 1) {
        state.value.hzname = res.data.hzname;
      }
    });
  }

  function categoryList() {
    sheep.$api.yy.categoryList().then((res) => {
      if (res.code === 1) {
        state.value.tabList = res.data;
        state.value.id = res.data[0].id;
        goods();
      }
    });
  }
  // 商品列表
  function goods() {
    state.value.loading = true;

    sheep.$api.yy
      .goods({
        category_id: state.value.id,
        page: state.value.page,
        keyword: state.value.keyword,
      })
      .then((res) => {
        if (res.code === 1) {
          state.value.list = [...state.value.list, ...res.data.data];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  }

  function handleChange(item) {
    state.value.active = item.index;
    state.value.id = item.id;
    state.value.page = 1;
    state.value.list = [];
    goods();
  }

  function applyForSettlement() {
    // pages/yy/enteringTheStore

    // applyShow

    sheep.$api.yy
      .applyShow()
      .then((res) => {
        // 状态:0=待审核,1=审核成功,2=审核失败  1  和2   就不跳转

        // 状态:0=待审核,1=审核成功,2=审核失败
        if (res.data.status === 1) {
          uni.showToast({
            title: '您已是入驻品牌',
            icon: 'none',
          });
          return;
        }

        if (res.data.status === 0) {
          uni.showToast({
            title: '您的申请正在审核中',
            icon: 'none',
          });
          return;
        }
        uni.navigateTo({
          url: '/pages/yy/brandApply',
        });
        return;
      })
      .catch(() => {
        uni.navigateTo({
          url: '/pages/yy/brandApply',
        });
      });
  }

  function toDetail(i) {
    uni.navigateTo({
      url: '/pages/goods/index?id=' + i.id,
    });
  }

  // 清空搜索内容并重新获取商品列表
  function clearContet(e) {
    // 当输入框为空时重置搜索
    if (!e?.trim()) {
      state.value.keyword = '';
      goods();
    }
  }
</script>

<style lang="scss" scoped></style>
